<template>
	<view class="zone">
		<Header title="扭蛋熊猫" color="#fff"></Header>
		<view class="main" @click="$u.toast('即将正式上线')">
			<image src="http://img.cpgm.cc/panda/static/forest/img.png" mode="widthFix" />

			<view class="left" @click="$u.toast('即将正式上线')">
				<image src="http://img.cpgm.cc/panda/static/forest/1.png" mode="widthFix" />
				<image src="http://img.cpgm.cc/panda/static/forest/2.png" mode="widthFix" />
				<image src="http://img.cpgm.cc/panda/static/forest/3.png" mode="widthFix" />
				<image src="http://img.cpgm.cc/panda/static/forest/4.png" mode="widthFix" />
			</view>

			<view class="right" @click="$u.toast('即将正式上线')">
				<image src="http://img.cpgm.cc/panda/static/forest/5.png" mode="widthFix" />
				<image src="http://img.cpgm.cc/panda/static/forest/6.png" mode="widthFix" />
				<image src="http://img.cpgm.cc/panda/static/forest/7.png" mode="widthFix" />
			</view>

			<image class="egg" @click="$u.toast('即将正式上线')" src="http://img.cpgm.cc/panda/static/forest/egg.png" mode="widthFix" />
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
.main {
	width: 100%;
	line-height: 0;
	position: relative;

	image{
		width: 100%;
		margin-top: -60px;
	}

	.left {
		position: absolute;
		top: 20%;
		left: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 50px;
			margin: 8px 0;
		}
	}

	.right {
		position: absolute;
		top: 20%;
		right: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 50px;
			margin: 8px 0;
		}
	}

	.egg {
		position: absolute;
		width: 60px;
		top: 60%;
		right: 15px;
	}
}
</style>
